
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <select class="form-control w-25" v-model="type" @change="changeType">
            <option v-for="option in options" v-bind:value="option.value">
                {{ option.value }}
            </option>
        </select>
        <input v-on:keyup.enter="search" v-model.trim="keyword" class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button v-on:click="search" class="btn btn-outline-success my-2 my-sm-0" type="button">Search</button>
    </div>
</nav>
<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th width="20%">标题</th>
            <th width="6%">标签</th>
            <th >内容</th>
            <th width="5%">类型</th>
            <th >操作</th>
        </tr>
    </thead>
    <tbody>
        <tr v-if="searchList.length == 0">
            <td colspan="10" align="center">

            </td>
        </tr>
        <tr v-for="v in searchList">
            <td>{{ v.title }}</td>
            <td v-html="v.tags"></td>
            <td v-html="v.content"></td>
            <td>{{ v.type }}</td>
            <td>
                <div class="btn-group">
                    <a class="btn btn-default" href="javascript:;"><i v-on:click="edit" v-bind:data-id="v.id" class="fa fa-edit"></i></a>
                    <a class="btn btn-default" href="javascript:;"><i v-on:click="del" v-bind:data-id="v.id" v-bind:data-title="v.title" class="fa fa-trash-o"></i></a>
                </div>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr v-if="searchList.length > 0">
            <td colspan="10">
                <page-component
                                :pageSize="size"
                                :total="count"
                                :p="p"
                                @change="search"
                                ></page-component>
            </td>
        </tr>
    </tfoot>
</table>

<script type="text/javascript">
    global.data.unique_id = '<?= $_unique_id ?? ""?>';
    let type = '<?= $type ?? ""?>';
    let options = [];
    let default_list_type = $.cookie('default_list_type');
    if (type.length) {
        let types = JSON.parse(type);
        for(let i = 0,len = types.length; i < len; i++) {
            if (i === 0 && default_list_type === undefined) default_list_type = types[i]
            options.push({value: types[i]})
        }
    }

    Vue.component('page-component', {
        props : {
            p : {
                type : Number,
                default : 1
            },
            perPages : {
                type : Number,
                default : 5
            },
            //每页显示条数
            pageSize : {
                type : Number,
                default : 10
            },

            //总记录数
            total : {
                type : Number,
                default : 1
            }
        },
        methods : {
            prev(){
                if (this.index > 1) {
                    this.go(this.index - 1)
                }
            },
            next(){
                if (this.index < this.pages) {
                    this.go(this.index + 1)
                }
            },
            first(){
                if (this.index !== 1) {
                    this.go(1)
                }
            },
            last(){
                if (this.index != this.pages) {
                    this.go(this.pages)
                }
            },
            go (page) {
                if (this.index !== page) {
                    this.index = page
                    //父组件通过change方法来接受当前的页码
                    this.$emit('change', this, this.index)
                }
            }
        },
        computed : {

            //计算总页码
            pages(){
                return Math.ceil(this.size / this.limit)
            },

            //计算页码，当count等变化时自动计算
            pagers () {
                const array = []
                const perPages = this.perPages
                const pageCount = this.pages
                let current = this.index
                const _offset = (perPages - 1) / 2


                const offset = {
                    start : current - _offset,
                    end   : current + _offset
                }

                //-1, 3
                if (offset.start < 1) {
                    offset.end = offset.end + (1 - offset.start)
                    offset.start = 1
                }
                if (offset.end > pageCount) {
                    offset.start = offset.start - (offset.end - pageCount)
                    offset.end = pageCount
                }
                if (offset.start < 1) offset.start = 1

                this.showPrevMore = (offset.start > 1)
                this.showNextMore = (offset.end < pageCount)

                for (let i = offset.start; i <= offset.end; i++) {
                    array.push(i)
                }

                return array
            }
        },
        data: function () {
            return {
                p : this.p,//当前页码
                index : this.p || 1, //当前页码
                limit : this.pageSize, //每页显示条数
                size : this.total || 1, //总记录数
                showPrevMore : false,
                showNextMore : false
            }
        },
        template: '<nav aria-label="Page navigation example">'
            + '<ul class="pagination">'
                + '<li ><a class="page-link" href="javascript:;">共{{size}}条数据,{{pages}}页,当前第{{p}}页</a></li>'
                + '<li @click="prev" class="page-item"><a class="page-link" href="javascript:;">Previous</a></li>'
                + '<li @click="first" class="page-item"><a class="page-link" href="javascript:;">first</a></li>'
                + '<li  v-for="pager in pagers" @click="go(pager)" class="page-item" v-bind:class="{active : p === pager}"><a class="page-link" href="javascript:;">{{ pager }}</a></li>'
                + '<li @click="last" class="page-item"><a class="page-link" href="javascript:;">last</a></li>'
                + '<li @click="next" class="page-item"><a class="page-link" href="javascript:;">Next</a></li>'
            + '</ul>'
            + '</nav>'
        ,
        watch : {
            pageIndex(val) {
                this.index = val || 1
            },
            pageSize(val) {
                this.limit = val || 10
            },
            total(val) {
                this.size = val || 1
            }
        }
    })

    let params = {
        el: '#app',
        data: {
            cookie : $.cookie,
            options : options,
            type: default_list_type,
            searching : true,
            count: 0,
            p : 1,
            size : 0,
            counter: 0,
            keyword: '',
            searchList: []
        },
        mounted: function () {
            this.search()
        },
        methods: {
            changeType : function () {
                this.cookie('default_list_type', this.type)
            },
            del : function (event) {
                let id = event.target.getAttribute('data-id');
                let title = event.target.getAttribute('data-title');
                swal({
                    title : "是否删除[" + title + "] ?",
                    icon: "warning",
                }).then(function(){
                    let params = {
                        action : 'delete',
                        id : id,
                    }
                    axios
                        .post('', params , {transformRequest: [function(data) {      //在请求之前对data传参进行格式转换
                                data = Qs.stringify(data)
                                return data
                            }]})
                        .then(function (response) {
                            if (typeof response.data.msg != 'undefined' &&  response.data.msg != '') {
                                throw   response.data.msg
                            }
                            if (typeof response.data.data == 'undefined' || response.data.data == null) {
                                throw   "系统正在维护"
                            }
                            toastr.success('删除成功')
                        })
                        .catch(function (error) { // 请求失败处理
                            toastr.info(error)
                        });
                });
            },
            edit : function (event) {
                let id = event.target.getAttribute('data-id');
                window.open('/English/words_add?id=' + id);
            },
            search : function (obj, p = 1) {
                let that = this;
                let params = {
                    type: this.type,
                    keyword: this.keyword,
                    p: p
                };
                this.p = p;
                this.count = 20;

                post('', params, function (data) {
                    that.searchList = data.data.list
                    that.count = data.data.total
                    that.size = data.data.size
                });
            }
        }
    };

    var app = new Vue($.extend(true, params, global));
</script>